@import "mycolor";
@mixin fade($top){
	position: relative;
	top:$top;
	opacity: 0;
	transition: 1.8s;
}

@mixin in($top){
	.in{
		opacity:1;
		top:$top;
	}
}

body{
	.container{
		max-width:1226px;
		.row{
			
			.col-6{
				.breadcrumb{
					.breadcrumb-item + .breadcrumb-item::before{
						content:"|";
					}
					.breadcrumb-item{
						a{
							color:#616161;
							text-decoration:none;
							font-size:12px;
							h5{
								font-size: 18px;
							}
							&:hover{
								color:$xm-orange;
							}
						}
					}
				}
				.breadcrumb.float-right{
					.breadcrumb-item + .breadcrumb-item::before{
						content:"|";
						color:#eee;
					}
					.breadcrumb-item{
						a{
							font-size:14px;
							color:#616161;
							text-decoration:none;
							&:hover{
								color:$xm-orange;
							}
						}
					}
					button{
						font-size:12px;
						cursor:pointer;
						border: none;
						background: $xm-orange;
						color:#fff;
						outline: none;
						&:hover{
							background: #FE5500;
						}
					}
				}
			}
		}
	}
	.row{
		.carousel{
			.position-relative{
				.d-block{
					position:absolute;
					z-index: 1;
					top:20px;
					width:100%;
					opacity: 0;
					transition: 2s;
					span{
						font-size: 2.5rem;
						color: #fff;
					}
					h1{
						font-size: 6rem;
						color: #fff;
					}
					p{
						font-size: 2rem;
						color:#ecb41f;
					}
				}
				@include in(-10px);
			}
			
			.carousel-inner{
				.active{
					transition: .5s linear;
					opacity: 1;
				}
			}
			
			ul{
				li{
					transform: 0.5s linear;
					
					&:hover{
						cursor: pointer;
						background: #eee;
					}
				}
			}
		}
		}
	.container{
		max-width:1226px;
		.d-flex{
				flex-wrap:wrap;
			div{
				width:20%;
				color: #848484;
				font-size:0.7rem;
				h5{
					font-weight: 600;
					font-size: 1.1rem;
					color:#000;
				}
			}
		}
	}
	.container-fluid{
		.position-relative{
			background: url("../img/ad/cpu.jpg");
			color: #eee;
			font-size:3rem;
			.py-5{
				@include fade(50px);
				padding-left:25%;
				}
			@include in(10px);
		}
	}
	.cpu{
		padding-left: 25%;
		padding-right: 25%;
		transition: 3s;
		h3{
			font-size:2rem;
			margin-top: 3rem;
			margin-bottom:3rem;
			font-weight: 700;
			@include fade(30px);
			
		}
		h5{
			font-size:1rem;
			@include fade(30px);
		}
		
		@include in(0px);
		.clearfix{
			@include fade(40px);
			.box{
				width: 245px;
				float:left;
				height: 120px;
				border: 1px solid #b2b2b2;	
				text-align: center;
				.h5{
					font-weight: 700;
					p{
						margin-bottom: 0.1rem;
					}
				}
			}
		}
		@include in(0px);
		.span{
			margin-top: 1rem;
			color:#8d8d8d;
			font-size:0.75rem;
		}
		.img{
			background:#000 url("../img/ad/play.jpg") no-repeat;
			background-size: cover;
			height: 465px;
		}
	}
}